<template>
  <div class="layout">
    <router-view></router-view>

    <!-- <div class="tab">
      <router-link to="/layout/article">面经</router-link>
      <router-link to="/layout/collect">收藏</router-link>
      <router-link to="/layout/like">喜欢</router-link>
      <router-link to="/layout/user">我的</router-link>
    </div> -->
    <van-tabbar
      v-model="active"
      route
      active-color="#febf67"
      inactive-color="#999"
    >
      <van-tabbar-item icon="fire-o" to="/layout/article">面经</van-tabbar-item>
      <van-tabbar-item icon="star-o" to="/layout/collect">收藏</van-tabbar-item>
      <van-tabbar-item icon="like-o" to="/layout/like">喜欢</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/layout/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "HmLayout",
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style scoped lang="less">
.layout {
  margin-bottom: 50px;
}
.tab {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  a.active {
    color: #febf67;
  }
}
</style>
